<template>
  <div class="hotsearch">
    <p>热门搜索：</p>
    <ul>
      <li v-for="(item,index) in hotSearchList" :key="index" @click="$emit('search',item.first)">{{item.first}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data(){
    return{
      hotSearchList:[]
    }
  },
  created(){
    this.$http.get('/search/hot').then(d=>{
      this.hotSearchList=d.data.result.hots;
    })
  }
}
</script>
<style lang="less" scoped>
.hotsearch{
  ul{
    overflow: hidden;
    padding: 10px;
    li{
      display: inline-block;
      height: 32px;
      margin-right: 8px;
      margin-bottom: 8px;
      padding: 0 14px;
      font-size: 14px;
      line-height: 32px;
      color: #333;
      border: 1px solid #333;
      border-radius: 32px;
    }
  }
}
</style>